<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>我的学习</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="shortcut icon" href="img/logo.ico"/>
    <link rel="bookmark" href="img/logo.ico" type="image/x-icon"/>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="js/cacheUtil.js"></script>
    <script src="js/httpUtil.js"></script>
    <link rel="stylesheet" type="text/css" href="css/myCourses.css">
</head>
<body>
<div class="container">
    <iframe src="head.html" frameborder="0" width="1110" height="72" scrolling="No"></iframe>
    <div class="row" id="div_course_list">

    </div>
    <iframe src="bottom.html" frameborder="0" width="100%" height="200" scrolling="No"></iframe>
</div>


<template id="myCourse" class="course-card">
    <a target="_blank" href="#">
        <div class="course_card_head">
            <img src="{img}" alt="...">
        </div>
        <div class="course_card_title">{name}</div>
        <div class="course-card-progress">
            <div class="course_card_progress_all">
                <div class="course_card_progress_current" style="width:37%;"></div>
            </div>
            <div class="course_card_txt">已学习9/24课时</div>
        </div>
    </a>
</template>
<template id="template_course">
    <div class="col-xm-3 col-md-4">
        <div class="thumbnail container" style="text-align: center">
            <img src="{img}" alt="..." class="container">
            <div class="caption container">
                <div class="course_card_title">{name}</div>
                <div class="course-card-progress">
                    <div class="course_card_progress_all">
                        <div class="course_card_progress_current" style="width:37%;"></div>
                    </div>
                    <div class="course_card_txt" style="color: #0a9a3d;">已学习9/24课时</div>
                </div>
            </div>
        </div>
    </div>
</template>
</div>
<script>
    //加载页面->显示商品列表
    $(function () {
        loadCoursesList();
    });

    //ajax 请求后台获取商品列表数据
    function loadCoursesList() {
        console.log("loadCoursesList");
        //发起ajax请求
        let url = "/course//UserCourseInfo";
        let user = getLoginUser();
        let params = {userId: user.id}
        // let params = {userId: 1000, userName: "jerry"};
        /* httpGetNoParams(url, function (resp) {
             console.log(resp);
             renderingGoodsList(resp);
         });*/
        console.log(user.id);
        httpGet(url, params, function (data) {
            console.log("data");
            console.log(data);
            renderingGoodsList(data)
        })
    }

    //渲染显示商品列表
    function renderingGoodsList(courseList) {
        let templateCourseHtml = $("#template_course").html();
        let courseListHtml = "";
        let tempCourseHtml;
        //遍历商品列表
        $.each(courseList, function (index, course) {
            //后台数据填充到模板中
            tempCourseHtml = templateCourseHtml.replace(/{name}/g, course.name)
                .replace(/{des}/g, course.des)
                .replace(/{img}/g, course.img);
            courseListHtml += tempCourseHtml;
        });
        //拼接商品展示html
        //html 填充到页面当中
        $("#div_course_list").html(courseListHtml);
    }
</script>
</body>
</html>